/** 测试数据 */
var debugData = JSON.parse('[{"value":100,"name":"jj"},{"value":102,"name":"jlj"}]')

/** 测试开关 */
var debug = false

/**
 * 用于生成静态标签管理
 * @param {HTMLElement} _this 指示标签系统的元素
 * @param {string} type 指示标签系统的类型，目前有：shouru jinjian lixiedu kaohe shijian diqu teshu
 * @param {*} data JSON数据类型
 */
function tagManage (type, data) {
  /** 点选按钮 */
  var textButton = ``
  /** 隐藏按钮 */
  var hiddenButton = ``
  if (debug) {
    var JSONData = debugData
  } else {
    JSONData = data
  }
  $.each(JSONData, function (k, v) {
    textButton += `<span class="tag_content"><a inori-data='${v.name}' id = '${v.value}'>${v.name}</a></span>`
    hiddenButton += `<input type="checkbox" name="check_${type}[]" value = '${v.value}' id="${v.name}">`
  })
  textButton += `<div id='add_new_${type}_tag_content'></div>`
  $(`#${type}_tag_list_button`).prepend(textButton)
  $(`#${type}_hidden_tag`).prepend(hiddenButton)

  var autoList = window.tagList[type]
  // 搜索框逻辑
  $(`#${type}_tag_list`).tagEditor({
    initialTags: [],
    clickDelete: true,
    placeholder: '请点选或输入标签，请点选或输入标签，点击空白处确认添加',
    autocomplete: {
      delay: 0,
      position: {collision: 'flip'},
      source: autoList
    },
    beforeTagSave: function (field, editor, tags, tag, val) { // 有就直接加，没有就添加
      // console.dir(field)
      // console.dir(editor)
      // console.dir(tags)// 添加前有的
      // console.log(tag)// 添加的
      // console.dir(val)// 添加的
      /** 验证是否存在，通过选取inori-data为val的元素的id来实现 */
      var isHas = $(`#${type}_tag_list_button [inori-data="${val}"]`).attr('id')

      /** ajax地址本体，不含参数 */
      var urlBase = document.getElementById('get_new_tag_id').value

      if (!isHas) { // 不存在
        /** 可见对话框元素字符串，应附在$('#add_new_tag_content')内 */
        var addNewOption = `<form autocomplete="off" method="get" onsubmit='return ajaxAddNewTypeTag(this, "${type}","${val}", "${urlBase}")' id='newTagOption'><input type="text" class='main_name' placeholder="正名" value='${val}'><input class='alt_name' type="text" placeholder="别名"> <input class= 'name_summary' type="text" placeholder="简短备注"><input type='submit' class='submit_ajax' value='确定'><span onclick='deleteThis(this)'>取消</span></form>`

        /** 附加对话框，将在确定按钮点击时消失 */
        $(`#add_new_${type}_tag_content`).append(addNewOption)
        /** 填完才恢复显示 */
        $(`.${type}_tag_search_list`).css('visibility', 'hidden')
        localStorage.setItem('prevTitle', String($(document).attr('title')))
        $(document).attr('title', '请先完成当前操作')
        /** focus在别名处 */
        $(`#add_new_${type}_tag_content .alt_name`).focus()
        // 不添加
        return false
      } else { // 存在的
        // 检查有没有active
        if (!$(`.multi_row_${type}_tag_search a[inori-data="${val}"]`).closest('.tag_content ').hasClass('active')) {
          $(`.multi_row_${type}_tag_search a[inori-data="${val}"]`).closest('.tag_content ').addClass('active')
        }
        $(`#${type}_hidden_tag #${val}`).prop('checked', true)
      }
    },
    beforeTagDelete: function (field, editor, tags, val) {
      // console.dir(field)
      // console.dir(editor)
      // console.dir(tags)// 去除前
      // console.dir(val)// 去除的那个
      $(`#${type}_hidden_tag #${val}`).prop('checked', false)
      $(`#${type}_hidden_tag #${val}`).change()
      $(`#${type}_tag_list_button [inori-data="${val}"]`).parent().removeClass('active')
      // $(`span.tag_content>a[inori-data=${val}]`).off('click', removeTagClick)
    }
  })
}

/** 这个函数究竟要做什么：
 * 1：获取对话框的东西
 * 2：构建get链接
 * 3：ajax返回id后构建相应的选项和隐藏checkbox，并把val上去列表中
 * debugID是返回的
 * var newTagButton = `<input type="checkbox" name="${debugID}" id="check_${debugID}" value="${val}" checked>`
 * var button = `<span class="tag_content"><a inori-data='${val}' id="${debugID}">${val}</a></span>`
 * 4：ajax完成后删除自身
 */
function ajaxAddNewTypeTag (_this, type, val, urlBase) {
  /** debug数据 */
  var debugID = 999
  var mainName = ''
  var altName = ''
  var summary = ''
  _this.setAttribute('onsubmit', 'return false')
  $.each( $(_this).children('input[type="text"]'), function (k, v) {
    var switchObj = {
      0: function () { mainName = $(this).val(); console.log(mainName) },
      1: function () { altName = $(this).val(); console.log(altName) },
      2: function () { summary = $(this).val(); console.log(summary) }
    }
    switchObj[k].call(v)
  })
  /** get 的方式放上去，返回一个ID */
  /** 补一个ajax后才给后端 */
  var typeToNumber = {
    shouru: 1,
    jinjian: 2,
    lixiedu: 3,
    kaohe: 4,
    shijian: 5,
    diqu: 6,
    teshu: 7
  }
  let typeAlt = typeToNumber[type]
  var ajaxUrl = `${urlBase}?type=${typeAlt}&mainName=${mainName}&altName=${altName}&summary=${summary}`

  $.get(ajaxUrl, function (debugID) {
    /** 标签隐藏选框 */
    var newTagButton = `<input type="checkbox" name="check_${type}[]" id="${val}" value="${debugID}" checked>`
    $(`#${type}_hidden_tag`).append(newTagButton)

    /** 可见选框 */
    var button = `<span class="tag_content"><a inori-data='${val}' right-click='true' id="${debugID}">${val}</a></span>`
    $(`#${type}_tag_list_button`).prepend(button)

    /** 恢复标签栏可见 */
    $(`.${type}_tag_search_list`).css('visibility', 'visible')
    /* 还原网页标题 */
    let prevTitle = localStorage.getItem('prevTitle')
    if (prevTitle) $(document).attr('title', prevTitle)
    /** 清空对话栏 */
    $(`#add_new_${type}_tag_content`).empty()
    /** 自动补全列表中添加一个 */
    String(typeof window.tagList[type]).toLowerCase() === 'array' ? window.tagList[type].push(val) : window.tagList[type] = [val]
    /** 解决焦点的问题 */
    $(`.${type}_tag_search_list .tag-editor.ui-sortable li:eq(-1)`).remove()
    $(`#${type}_tag_list_button [inori-data= "${val}"]`).click()
    $(`#${type}_tag_list_button`).click()
    return false
  })
  return false
}

/** 点击按钮上list…… */

function addClickListener (type) {
  // 点选框逻辑
  $(`#${type}_tag_list_button`).on('click', function topTagClick (e) {
    var target = e.target
    var data = target.getAttribute('inori-data')
    if (target.nodeName.toLowerCase() === 'a' && data !== undefined && !target.parentElement.classList.contains('active')) {
      // 没激活
      $(`#${type}_tag_list`).tagEditor('addTag', data, true)
      target.parentElement.classList.add('active')
      target.addEventListener('click', function removeTagClick (e) {
        e.target.parentElement.classList.remove('active')
        $(`#${type}_tag_list`).tagEditor('removeTag', e.target.getAttribute('inori-data'), true)
        e.stopPropagation()
      }, {
        once: true
      })
      console.log(data)
    } else if (target.nodeName.toLowerCase() === 'a' && data !== undefined && target.parentElement.classList.contains('active')) {
      target.parentElement.classList.remove('active')
      $(`#${type}_tag_list`).tagEditor('removeTag', data, true)
      e.stopPropagation()
    }
  })
}
